<template>
	<div class="box-wrap">
		<div class="container001">
			<div class="box">
				<div class="login_head">
					华图权限系统
				</div>
				<div class="login_body">
					<el-form :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2" label-width="100px" class="demo-ruleForm">
						<el-form-item label="账号" prop="username">
							<el-input type="text" class='input001' v-model="ruleForm2.username" auto-complete="off">
							</el-input>
						</el-form-item>
						<el-form-item label="密码" prop="password">
							<el-input type="password" class='input001' v-model="ruleForm2.password" auto-complete="off" @keyup.enter.native="submitForm"></el-input>
						</el-form-item>
					</el-form>
					<el-button type="primary" @click="submitForm" class="login_btn">登录</el-button>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
  import util from "@/common/util.js";
  import accountApi from '@/api/accountApi'
  import {mapMutations, mapActions} from 'vuex'
	var validateUsername = (rule, value, callback) => {
	  if (value === "") {
	    callback(new Error("请输入账号"));
	  } else {
	    callback();
	  }
	};
	var validatePassword = (rule, value, callback) => {
	  if (value === "") {
	    callback(new Error("请输入密码"));
	  } else {
	    callback();
	  }
	};

	export default {
	  data() {
	    let fk001 = 21;
	    return {
	      remeberPassword: false,
	      ruleForm2: {
	        username: "",
	        password: ""
	      },
	      rules2: {
	        username: [{ validator: validateUsername, trigger: "change" }],
	        password: [{ validator: validatePassword, trigger: "change" }]
	      }
	    };
	  },
	  methods: {
	    submitForm() {
	      this.$refs["ruleForm2"].validate(valid => {
          if (valid) {
            const form = this.ruleForm2
            accountApi.login({
              username: form.username,
              password: form.password
            }).then(data => {
              this.setToken(data.data.token)
              return this.getAuths()
            }).then(() => {
              this.$router.push('/')
            }).catch(e => this.$message.error(e.message))
          }
	      });
      },
      ...mapMutations('auth', ['setToken']),
      ...mapActions('auth', ['getAuths'])
	  }
	};
</script>

<style lang="less" scoped>
  @import "../../less/skin";
	.box-wrap {
	  background: url("../../assets/login_bg.png");
	  background-position: center 0;
	  background-repeat: no-repeat;
	  height: 100%;
	  width: 100%;
	  min-height: 800px;
	}
	.container001 {
	  width: 980px;
	  min-height: 580px;
	  margin: 0 auto;
	  padding: 128px 0 0 0;
	}
	.box {
	  color: #fff;
	  width: 530px;
	  margin: 0 auto;
	  background: #fff;
	  border-radius: 10px;
	  .login_head {
	    width: 530px;
	    height: 200px;
	    background: url("../../assets/login_head.png");
	    font-size: 50px;
	    color: #fefeff;
	    text-align: center;
	    line-height: 200px;
	  }
	  .login_body {
	    padding: 50px 70px 50px 0;
	    .login_btn {
	      width: 400px;
	      margin-left: 60px;
	    }
	  }
	}
</style>



